<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
	<script>
		window.color = 'red'
		document.color = 'yellow'

		var s1 = {color:'blue'}
		function changeColor(){
			console.log(this.color)
		}

		changeColor.call()		 // red
		changeColor.call(window) // red
		changeColor.call(document) // yellow
		changeColor.call(this) // red
		changeColor.call(s1) // blue

		var Pet = {
	        words : '...',
	        speak : function (say) {
	            console.log(say + ''+ this.words)
	        }
	    }
	    Pet.speak('Speak') // 结果：Speak...

	    var Dog = {
	        words:'Wang'
	    }

	    //将this的指向改变成了Dog
	    Pet.speak.call(Dog, 'Speak') //结果： SpeakWang



	    window.firstName = "Cynthia"; 
        window.lastName = "_xie";

        var myObject = {firstName:'my', lastName:'Object'};

        function getName(){
            console.log(this.firstName + this.lastName);
        }

        function getMessage(sex,age){
            console.log(this.firstName + this.lastName + " 性别: " + sex + " age: " + age );
        }

        getName.call(window); // Cynthia_xie
        getName.call(myObject); // myObject

        getName.apply(window); // Cynthia_xie
        getName.apply(myObject);// myObject

        getMessage.call(window,"女",21); //Cynthia_xie 性别: 女 age: 21
        getMessage.apply(window,["女",21]); // Cynthia_xie 性别: 女 age: 21

        getMessage.call(myObject,"未知",22); //myObject 性别: 未知 age: 22
        getMessage.apply(myObject,["未知",22]); // myObject 性别: 未知 age: 22

        /*
        1. 每个函数都包含两个非继承而来的方法：call()方法和apply()方法。
2. 相同点：这两个方法的作用是一样的。
3. 不同点：接收参数的方式不同。
         */
	</script>
</body>
</html>